<template>
  <div class="CentralNavigation" ref="mainWidth">
    <div class="CentralNavigation-top">
      <NavigationTitle :TitleData="TitleData" @chiincident="Fathergincident" />
    </div>
    <div class="CentralNavigation-con">
      <NavigationCon :ConData="ConData.ConDataList" :ScrollWidth="ScrollWidth" v-if="ConData.ConDataList.length !== 0" />
      <el-skeleton :rows="5" animated v-else />
    </div>
  </div>
</template>
  
<script setup lang="ts">
import { reactive, ref, watch, onMounted } from 'vue';
import NavigationCon from './NavigationCon/NavigationCon.vue';
import NavigationTitle from './NavigationTitle/NavigationTitle.vue';
// 节流工具
import { debounce } from '../../utils/Debounce';
const { TitleData, ImgdataList } = defineProps(['TitleData', 'ImgdataList']);

// 页面DOM绑定的属性
const mainWidth: any = ref();
// 页面尺寸赋值
const ScrollWidth: any = ref();


// 获取页面尺寸
onMounted(() => {
  ScrollWidth.value = mainWidth.value.scrollWidth;
});
// 创建一个响应式对象
const ConData: any = reactive({
  ConDataList: [],
});


// 用节流函数
const Fathergincident = (item: any) => {
  const newarr: any = ImgdataList.filter((e: any) => e.class_detail !== null ? e.class_detail.includes(item) : {});
  ConData.ConDataList = newarr;
};

// 监听页面尺寸发生变化
window.addEventListener('resize', () => {
  ScrollWidth.value = mainWidth.value.scrollWidth;
});

</script>
  
<style scoped lang="scss">
.CentralNavigation {
  width: 100%;
  min-height: 350px;
  position: relative;
  display: flex;
  flex-direction: column;

  .CentralNavigation-top {
    width: 100%;
    height: 70px;
  }

  .CentralNavigation-con {
    flex: 1;
  }
}
</style>
  